<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/10/14
  Time: 17:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
    <meta charset="UTF-8">
    <title>marquee</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <link type="text/css" rel="stylesheet" href="html/css/style.css"/>
    <script type="text/javascript" src="html/scripts/function.js"></script>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="js/tittlebox.js"></script>
    <style>
        body {
            background: white;
        }

        marquee {
            /*font-weight: bolder;*/
            font-size: 40px;
            color: #dbdbdb;
        }
        #sss{
            /* 一开始要隐藏起来 */
            /*display: none;*/
            position: absolute;
            top: 0;
            left: 0;
            width: 310px;
            height: 210px;
            background-color: transparent;
            z-index:10;
            /* 透明效果 */
            /*opacity: .6 ;*/
            /*cursor: move;*/
        }


        body {
            background: white;
            padding: 20px;
        }

        marquee {
            /*font-weight: bolder;*/
            font-size: 40px;
            color: transparent;
        }

        .putincar {
            float: right;
            margin-top: 1px;
            margin-right: 40px;
        }

        #gobuy {
            height: 32px;
            color: black;
            font-size: 18px;
            letter-spacing: 2px;
            border: none;
            width: 150px;
            background-color: #FFF8E7;
            text-decoration: none;
        }

        #submit {
            height: 32px;
            color: black;
            font-size: 18px;
            letter-spacing: 2px;
            border: none;
            width: 150px;
            background-color: #FFF8E7;
        }

        #submit:hover, #gobuy:hover {
            cursor: pointer;
        }

        /* 清除默认样式 */
        *{
            margin: 0;
            padding: 0;
        }

        /* 左边小盒子样式 */
        .box1{
            position: relative;
            width: 310px;
            height: 310px;
            border: 1px solid #999;
            margin-left: 0px;
            margin-top: 0px;
        }
        .box1 .img1{
            /* 设置左边图片大小 */
            width: 310px;
        }

        /* 遮罩层bg的样式 */
        .box1_bg{
            /* 一开始要隐藏起来 */
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 150px;
            height: 150px;
            background-color: yellow;
            /* 透明效果 */
            opacity: .5 ;
            cursor: move;
        }
        #box2_bg{
            /* 一开始要隐藏起来 */
            /*display: none;*/
            position: absolute;
            top: 0;
            left: 0;
            width: 310px;
            height: 210px;
            background-color: transparent;
            /* 透明效果 */
            /*opacity: .6 ;*/
            /*cursor: move;*/
        }

        /* 右边大盒子样式 */
        .big_img{
            /* 一开始要隐藏起来 */
            display: none;
            width: 540px;
            height: 540px;
            position: absolute;
            top: 0;
            left: 470px;
            border: 1px solid #999;
            overflow: hidden;
        }
        /* 大盒子里面的图片样式 */
        .big_img .big_imgs{
            position: absolute;
            top: 0;
            left: 0;
            width: 1000px;
        }

    </style>
</head>

<body>
<%--<div id="sss"  >--%>
<%--    <marquee direction="up">UP</marquee>--%>
<%--    <marquee direction="down">DOWN</marquee>--%>
<%--    <marquee direction="left">LEFT</marquee>--%>
<%--    <marquee direction="right">RIGHT</marquee>--%>
<%--</div>--%>
<%--<div id="v_m" style="display: block">--%>
<%--    <video id="myvideo" width="310" height="210" controls autoplay>--%>
<%--        <source src="html/images/product/aaa.mp4" type="video/mp4">--%>
<%--    </video>--%>
<%--    <div>--%>
<%--        <h3>點擊關閉視頻</h3>--%>
<%--    </div>--%>
<%--</div>--%>






                <div class="box1">
                    <img class="img1" src="html/images/product/Redmi旅行箱.jpg"
                         style="width: 310px;height: 310px" alt="#"/>

                    <%--    <img class="img1" src="html\images\product\Redmi旅行箱.jpg" alt="#" >--%>
                    <div class="box1_bg" onclick="video()"></div>
                    <div class="big_img">
                        <img class="big_imgs" src="html/images/product/Redmi旅行箱.jpg" alt="#" >
                    </div>
                    <div id="box2_bg" >
                        <marquee direction="up">UP</marquee>
                        <marquee direction="down">DOWN</marquee>
                        <marquee direction="left">LEFT</marquee>
                        <marquee direction="right">RIGHT</marquee>
                    </div>
                    <div id="v_m" style="display: none">
                        <video id="myvideo" width="310" height="210" controls autoplay>
                            <source src="html/images/product/aaa.mp4" type="video/mp4">
                        </video>
                        <div>
                            <h3>點擊關閉視頻</h3>
                        </div>
                    </div>
                </div>





<script>
    // ①整个案例可以分为三个功能模块
    // ②鼠标经过小图片盒子,黄色的遮挡层和大图片盒子显示,离开-->隐藏2个盒子功能
    // ③黄色的遮挡层 跟随 鼠标功能。
    // ④移动黄色遮挡层,大图片跟随移动功能。
    // 事件源：
    var box1 = document.querySelector('.box1');
    var bg = document.querySelector('.box1_bg');
    var big = document.querySelector('.big_img');
    // 1. 鼠标 经过 盒子的时候，显示 遮罩层 和 放大镜
    box1.addEventListener('mouseover',function(){
        bg.style.display = 'block';
        big.style.display = 'block';
    })
    // 2. 鼠标 离开 盒子的时候，隐藏 遮罩层 和 放大镜
    box1.addEventListener('mouseout',function(){
        bg.style.display = 'none';
        big.style.display = 'none';
    })

    // 2.鼠标移动的时候
    box1.addEventListener('mousemove',function(e){
        var x = e.pageX - this.offsetLeft; // x是鼠标到父盒子x距离
        var y = e.pageY - this.offsetTop; // y是鼠标到父盒子y距离
        // console.log(x ,y)
        // 最大移动距离，box1盒子的大小 减去 遮罩层的盒子大小
        var max_x = box1.offsetWidth - bg.offsetWidth;
        var max_y = box1.offsetHeight - bg.offsetHeight;
        if( max_x >=0 )
            // *将坐标减去 遮罩层盒子的一半 鼠标就落到遮罩层的中间
            // 移动距离X,Y
            var X = x - bg.offsetWidth/2;
        var Y = y - bg.offsetHeight/2;
        // *当遮罩层超出 box1 的边框的时候，设一个边界卡住它
        if(X <= 0 ){
            X = 0
        }else if( X >= max_x){
            X = max_x;
        }
        if(Y <= 0 ){
            Y=0
        }else if( Y >= max_y){
            Y = max_y;
        }
        // *把鼠标在盒子内的坐标给 遮罩层 实现跟随鼠标移动效果
        // 注意加上 px 不然不起效果
        bg.style.left = X +'px';
        bg.style.top = Y +'px';

        // 右边图片跟随移动，有一个小算法：big_img_x
        // 遮挡层移动距离（X）/遮挡层最大移动距离（max_x）=大图片移动距离（bigX)/大图片移动的最大距离（big_img_x)

        // 获取 图片 事件源
        var big_img = document.querySelector('.big_imgs');
        // big_img_x 求大图片移动的最大距离 正方形 距离一样的
        var big_img_x = big_img.offsetWidth - big.offsetWidth ;
        var big_img_y = big_img.offsetWidth - big.offsetWidth ;
        // bigX 大图片的移动距离
        var bigX = X * big_img_x / max_x ;
        var bigY = Y * big_img_y / max_x ;
        big_img.style.left = -bigX +'px';
        big_img.style.top = -bigY +'px';
    })
</script>
<script>
    var myvideo = document.getElementById("myvideo");
    var type_video = 1;
    myvideo.pause();
    function video() {
        if(type_video == 1){
            console.log("video");
            $(".img1").css("display","none");
            $(".big_img").css("display","none");
            $(".box1_bg").css("display","none");
            $("#v_m").show();
            $("#box2_bg").show();
            myvideo.play();
            type_video = 2;
        }else{
            console.log("remove");
            $(".img1").show();
            $(".big_img").show();
            $(".box1_bg").show();
            $("#v_m").css("display","none");
            $("#box2_bg").css("display","none");
            myvideo.pause();
            type_video = 1;
        }

    }

    function remove() {
        console.log("remove");
        $(".img1").show();
        $(".big_img").show();
        $(".box1_bg").show();
        $("#v_m").css("display","none");
        // $("#box2_bg").css("display","none");
        myvideo.pause();
    }
</script>
</body>

</html>
